<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页</title>
<link href="../c/base.css" rel="stylesheet" type="text/css">
<link href="../c/toefl.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../j/jQuery.js"></script>
    <script type="text/javascript">
            $(function (){
                draw(show_num);
            })

        var show_num = [];
        function changeC(){
            draw(show_num);
        }
        function  registSub() {
            var val = $(".login_inputYzm").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                alert('验证码为空！');
                draw(show_num);
                $(".login_inputYzm").focus();
            }else if(val == num){

                $(".login_inputYzm").val('');
                draw(show_num);
                $("#registForm").submit();
            }else{
                alert('验证码错误！请重新输入！');

                $(".login_inputYzm").val('');
                draw(show_num);

            }

        }

        function draw(show_num) {
            var canvas_width=$('#canvas').width();
            var canvas_height=$('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象
            var context = canvas.getContext("2d");//获取到canvas画图的环境
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度

            for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }

        function randomColor() {//得到随机的颜色值
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

    </script>
</head>

<body>
<div class="doc1180">

	<div class="header">
    	<div class="logo"><a href="####"><img src="../i/logo.png"></a></div>
        <div class="headerLink">
        	<a class="###" href="/toTeacherLogin">教师登录</a>
            <a class="###" href="/toLogin">用户登录</a>
            <a class="###" href="/toRegister">用户注册</a>
        </div>
    </div>

</div>
<div class="menu">
	<div class="doc1180">
   	  <div class="menuLink">
        	<ul class="fn-clear">
            	<li><a href="/">首页</a></li>
                <li><a href="###">托福人</a></li>
                <li><a href="###">公开课</a></li>
                <li><a href="###">群组聊</a></li>
                <li><a href="toCastle">福利城堡</a></li>
            </ul>
        </div>
        <div class="fenxiang">
        	<a href="#" class="weibo"><img src="../i/weibo.png" ></a>
            <a href="#" class="weixin"><img src="../i/weixin.png" ></a>
        </div>
    </div>
</div>
<div class="doc1180">
	<div class="login">
        <form action="register" method="post" id="registForm">
    	<div class="login_left">
       	  <h3 class="login_h3">新用户注册</h3>
            <div class="login_sr"><input type="text" class="login_inputYhm" placeholder="用户名" name="login_name"></div>
            <div class="login_sr"><input type="text" class="login_inputMm" placeholder="密码" name="password"></div>
            <div class="login_sr"><input type="text" class="login_inputEmail" placeholder="邮箱" name="email"></div>
          <div class="login_sr fn-clear"><input name="" type="text" class="login_inputYzm" placeholder="验证码"><div class="login_inputYzmPic"><canvas id="canvas" width="100" height="43"></canvas></div><a href="###" class="login_inputYzmH" onclick="changeC()">看不清，还一张</a></div>
            <div class="login_xieyi"><input name="" type="checkbox" value="" style="margin-right:10px; vertical-align:middle;">我同意<a href="###">《人人托福网服务协议》</a></div>
            <div><a href="###" class="login_Button" onclick="registSub()">注册</a></div>
            <div class="login_zcymm"><span>已有帐号？</span><a href="/toLogin">马上登录</a><a href="###" class="login_zhmm">找回密码</a></div>
      </div>
        </form>
      <div class="login_right">
      	<div class="login_rightH3">您也可以使用以下方式登录：</div>
        <div class="login_sanfang"><a href="###"><img src="../i/login_wb.png">新浪微博</a></div>
        <div class="login_sanfang"><a href="###"><img src="../i/login_qq.png">QQ登录</a></div>
        <div class="login_sanfang"><a href="###"><img src="../i/login_qw.png">腾讯微博</a></div>
        <div class="login_sanfang"><a href="###"><img src="../i/login_rr.png">人人网</a></div>
        <div class="login_shouquan">授权后表明你已同意 <a href="###">《人人托福网服务协议》</a></div>
      </div>
    </div>
</div>
<div class="flink">
  <div class="flinkTop"></div>
    <div class="flinkBody">
    	<h3>友情链接</h3>
        <ul>
        	<li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
        </ul>
    </div>
</div>
<div class="footer">
	<div class="doc1180">
    	<div class="footerLink">
        	<a href="###">人人托福</a>|
            <a href="###">联系我们</a>|
            <a href="###">招聘信息</a>|
            <a href="###">合作媒体</a>|
            <a href="###">意见反馈</a>|
            <a href="###">版权说明</a>
        </div>
        <div class="footerTxet">©2014 – xuanke.com All rights reserved. 京ICP备14022672号-1</div>
    </div>
</div>
</body>
</html>
